<template>
  <div class="p-2">

    <!-- 容器 -->
    <div style="width: 70%">
      <!-- el-form 包裹整个表格 -->
      <el-form ref="formRef" :model="data" :rules="rules" label-width="auto">
        <!-- 开头欢迎语 -->
        <div class="label-table-container">
          <div class="label-wrapper">
            <label class="table-label">开头欢迎语</label>
          </div>
          <!-- 右侧表格及设置区域 -->
          <div class="table-settings-wrapper">
            <!-- 表格 -->
            <el-table :data="data?.welcomeMsg?.msg" style="width: 100%;" border>
              <!-- 序号列 -->
              <el-table-column type="index" width="50"></el-table-column>
              <!-- 欢迎语内容 -->
              <el-table-column label="欢迎语内容">
                <template #default="scope">
                  <el-form-item :prop="'welcomeMsg.msg.' + scope.$index" :rules="rules.welcomeMsg">
                    <el-input v-model="data.welcomeMsg.msg[scope.$index]" placeholder="请输入欢迎语" type="textarea"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <!-- 操作 -->
              <el-table-column label="操作" width="60">
                <template #default="scope">
                  <el-tooltip content="删除" placement="top">
                    <el-button link type="primary" icon="Delete" @click="handleWelcomeMsgDelete(scope.$index)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <!-- 设置区域：字体颜色、加粗、新增按钮 -->
            <div class="settings-area" v-if="data?.welcomeMsg">
              <div class="flex gap-6 mb-3 flex-wrap">
                <div class="flex items-center">
                  <span class="bottom-body-title mr-2">字体颜色</span>
                  <el-color-picker v-model="data.welcomeMsg.fontColor"></el-color-picker>
                </div>
                <div class="flex items-center">
                  <span class="bottom-body-title mr-2">字体加粗</span>
                  <el-radio-group v-model="data.welcomeMsg.fontWeight">
                    <el-radio label="0">否</el-radio>
                    <el-radio label="1">是</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <el-button @click="handleWelcomeMsgButton" type="primary">新增欢迎语</el-button>
            </div>
          </div>
        </div>
        <div v-if="data">
          <el-form-item label="不正确回复" prop="errorReplyContent" :rules="rules.errorReplyContent">
            <el-input v-model="data.errorReplyContent" placeholder="请输入不正确回复" clearable/>
          </el-form-item>
          <el-form-item label="成功关键词" prop="correctKeyword" :rules="rules.correctKeyword">
            <el-input v-model="data.correctKeyword" placeholder="请输入成功关键词" clearable/>
          </el-form-item>
          <el-form-item label="跳转卡片图标" prop="skipCard.picture" :rules="rules.skipCardPicture">
            <JqtOssLibrary v-model="data.skipCard.picture" :limit="1" :isObject="false" />
          </el-form-item>
          <el-form-item label="跳转卡片标题" prop="skipCard.title" :rules="rules.skipCardTitle">
            <el-input v-model="data.skipCard.title" placeholder="请输入跳转卡片标题" clearable/>
          </el-form-item>
          <el-form-item label="跳转卡片副标题" prop="skipCard.subtitle" :rules="rules.skipCardSubtitle">
            <el-input v-model="data.skipCard.subtitle" placeholder="请输入跳转卡片副标题" clearable/>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
//默认颜色
import JqtOssLibrary from '@/components/JqtOssLibrary/index.vue';

const defaultColor = ref('#4173ff');
export interface KeywordModeSetVo {
  //开头欢迎语
  welcomeMsg?: {
    msg?: string[],//欢迎语
    fontColor?: string,//字体颜色
    fontWeight?: string,//字体加粗 0.否 1.是
  };
  //不正确回复
  errorReplyContent?: string;
  //正确关键词
  correctKeyword?: string;
  //跳转卡片
  skipCard?: {
    //跳转卡片图片
    picture: string;
    //跳转卡片标题
    title: string;
    //跳转卡片副标题
    subtitle: string;
  }
}

/**
 * 表格数据
 */
const data = ref<KeywordModeSetVo>();
const formRef = ref<ElFormInstance>();

const rules = {
  welcomeMsg: [
    { required: true, message: '请输入欢迎语内容', trigger: ['blur', 'change'] }
  ],
  errorReplyContent: [
    { required: true, message: '请输入不正确回复', trigger: ['blur', 'change'] }
  ],
  correctKeyword: [
    { required: true, message: '请输入正确关键词', trigger: ['blur', 'change'] }
  ],
  skipCardPicture: [
    { required: true, message: '请上传跳转卡片图片', trigger: ['change'] }
  ],
  skipCardTitle: [
    { required: true, message: '请输入跳转卡片标题', trigger: ['blur', 'change'] }
  ],
  skipCardSubtitle: [
    { required: true, message: '请输入跳转卡片副标题', trigger: ['blur', 'change'] }
  ],

};

const props = defineProps({
  modelValue: Object,
});
onMounted(() => {
// 在初始化时设置 formData
  Object.assign(data, props.modelValue);
  // 确保 data.value 存在，避免空值错误
  if (!data.value) {
    data.value = {};
  }

  // 如果 welcomeMsg 不存在，则进行初始化
  if (!data.value.welcomeMsg) {
    data.value.welcomeMsg = {
      msg: [],
      fontColor: '#000000',
      fontWeight: '0',
    };
  }
  // 如果 skipCard 不存在，则进行初始化
  if (!data.value.skipCard) {
    data.value.skipCard = {
      picture: '',
      title: '',
      subtitle: '',
    }
  }
});

const emit = defineEmits(['update:modelValue','confirmCallBack']);
watch(data, (newVal, oldVal) => {
  emit('update:modelValue', newVal);
  emit('confirmCallBack', newVal);
}, { deep: true, immediate: true });

watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    if(data.value){
      Object.assign(data.value, newVal);
    }
  }
}, { deep: true, immediate: true });

/**
 * 新增按钮点击事件
 */
const handleWelcomeMsgButton = () => {
  // 向 msg 数组添加一个新的空字符串
  data.value.welcomeMsg.msg.push('');
}

/** 删除按钮操作 */
const handleWelcomeMsgDelete = async (index: number) => {
  data.value.welcomeMsg.msg.splice(index, 1);
}

const validateForm = () => {
  return new Promise((resolve, reject) => {
    if (!formRef.value) {
      reject(new Error('表单引用不存在'));
      return;
    }
    formRef.value.validate(valid => {
      if (valid) {
        resolve(true);
      } else {
        reject(new Error('关键字设置字表单填写不完整'));
      }
    });
  });
};

defineExpose({
  validateForm,
});
</script>

<style scoped>
/* 容器：label、table 和 settings-area 的父容器 */
.label-table-container {
  display: flex;
  align-items: flex-start; /* 顶部对齐 */
  gap: 16px; /* label 和右侧内容之间的间距 */
  margin-bottom: 50px;
}

/* label 的包装器 */
.label-wrapper {
  min-width: fit-content; /* 确保宽度只够容纳文本 */
}

.table-label {
  color: var(--el-text-color-regular); /* 使用 Element Plus 的 --el-text-color-regular */
  font-weight: 1000; /* 可选：比普通文本稍重 */
  white-space: nowrap; /* 防止换行 */
  margin-top: 8px; /* 微调垂直位置，与表格第一行对齐 */
  font-size: 14px; /* 可选：与表单文本一致 */
}

/* table 和 settings-area 的共同包装器 */
.table-settings-wrapper {
  width: 100%; /* 占据剩余空间 */
}

/* 设置区域样式 */
.settings-area {
  margin-top: 16px; /* 与表格之间留出间距 */
  width: 100%; /* 明确占满整行 */
  font-size: 12px;
}

.dialog-title-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  padding: 8px; /* 内边距 */
  border: 1px solid #dcdfe6; /* 边框 */
  /* 设置背景色为 CSS 变量 --tableHeaderBg */
  background-color: var(--tableHeaderBg);
}

.label-container {
  width: 90px; /* 固定宽度，可根据实际需要调整 */
  text-align: right; /* 右对齐文本 */
  padding-right: 10px; /* 右内边距 */
  display: flex;
  align-items: center; /* 垂直居中 */
  font-size: 13px;
  color: var(--tableHeaderTextColor);
  font-weight: 1000;
}

/* 右侧：输入框 + 按钮 容器 */
.input-actions-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 4px 8px;
}

/* 表单项：去除默认 margin，占满空间 */
.input-actions-container .el-form-item {
  margin-bottom: 0 !important;
  flex: 1;
  display: flex;
  height: 100%;
}

/* 输入框样式控制 */
.input-actions-container .el-input {
  width: 100%;
}

.input-actions-container .title-textarea .el-textarea__inner {
  min-height: 36px !important;
  line-height: 1.5;
  padding: 6px 10px;
  font-size: 14px;
  resize: vertical;
}

/* 删除按钮微调 */
.input-actions-container .el-button {
  padding: 5px;
}
.dialog-item {
  margin-bottom: 20px; /* 每个对话块之间的间距 */
}

/* 最后一个不需要下边距 */
.dialog-item:last-child {
  margin-bottom: 0;
}

.dialog-item-title{
  font-size: 14px;
  font-weight: 500;
}
/**新增答案按钮*/
.dialog-answers-btn{
  height: 50px;
  display: flex;
  align-items: center; /* 垂直居中 */
  padding: 8px; /* 内边距 */
  border-left: 1px solid #dcdfe6; /* 边框 */
  border-right: 1px solid #dcdfe6; /* 边框 */
  background-color: #fff; /* 背景颜色 */
  gap: 12px;
}


/* 外层容器：使用 Flex 布局，垂直居中 */
.label-table-container-other {
  display: flex;
  align-items: center;        /* 垂直居中对齐 */
  gap: 16px;                  /* 推荐：统一间距，比 margin 更现代 */
  min-height: 40px;           /* 可选：保证最小高度，避免压缩 */
  flex-wrap: wrap;            /* 可选：响应式换行 */
}
/* 标签区域：保持左对齐，可设置固定宽度或最小宽度 */
.label-wrapper-other {
  flex-shrink: 0;             /* 防止标签被压缩 */
  white-space: nowrap;        /* 防止标签文字换行 */
}

/* 表单标签样式（可选美化） */
.table-label-other {
  font-weight: 1000;
  font-size: var(--el-form-label-font-size);
  color: var(--el-text-color-regular);
}


/* 设置区域：确保 el-row 正确使用 Flex 布局 */
.table-settings-wrapper-other .el-form-item {
  margin-bottom: 0 !important; /* 防止 el-form-item 添加额外下边距 */
}

/* el-row 启用 flex 并垂直居中 */
.table-settings-wrapper-other .el-row {
  display: flex;
  align-items: center;        /* 关键：让每一行内的列垂直居中 */
  flex-wrap: wrap;            /* 支持响应式换行 */
  width: 100%;
}

/* 可选：控制每个颜色选择器区域的间距 */
.table-settings-wrapper-other .el-col {
  display: flex;
  align-items: center;
  gap: 8px;                   /* label 和 picker 之间的间距 */
}
</style>
